<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <el-tag
        class="tag"
        @close="handleClose(index)"
        @click="onChange(item.path,index)"
        :type="$route.path==item.path ? '':'info'"
        :effect="$route.path==item.path ?'dark':'plain'"
        :class="$route.path==item.path ? activeClass:''"
        :closable="index!==0"
        v-for="(item,index) in taglist"
        :key="index"
      >
        <el-dropdown trigger="contextmenu" @command="handleCommand">
          {{item.title}}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="refreshRight" :command="{a:1,path:item.path,index}">刷新</el-dropdown-item>
              <el-dropdown-item :icon="close" :command="{a:2,path:item.path,index}">关闭右侧标签</el-dropdown-item>
              <el-dropdown-item :icon="circleClose" :command="{a:3,path:item.path,index}">全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-tag>
    </div>
  </el-scrollbar>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { refreshRight, close, circleClose } from "@element-plus/icons-vue";
export default {
  computed: {
    ...mapGetters(["taglist"]),
  },
  data() {
    return {
      activeClass: "iconfont icon-dingwei1 el-tag__close",
      refreshRight,
      close,
      circleClose,
    };
  },
  methods: {
    ...mapActions(["deletetag","refresh","rightClose","allClose",]),
    // 标签的移除事件
    handleClose(index) {
      this.deletetag(index);
    },
    // 标签的触发事件
    onChange(path, index) {
      this.$router.push(path);
    },
    // 标签的鼠标右击事件
    handleCommand(e){
      switch (e.a) {
        case 1:
          this.refresh(e)
          break;
       case 2:
          this.rightClose(e)
          break;
           case 3:
          this.allClose(e)
          break;
        default:
          break;
      }
     
    },
  },
};
</script>
<style lang="less" scoped>
.tag {
  margin-left: 15px;
  margin-top: 10px;
  cursor: pointer;
}
.scrollbar-flex-content {
  height: 50px;
  display: flex;
}
</style>